iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 13
0
Mobile Development

30天手滑用Google Flutter解鎖Hybrid App成就系列 第 13

30天Flutter手滑系列 - Firebase 設定

  • 分享至 

  • xImage
  •  

結束上一篇30天Flutter手滑系列 - JSON與序列化(JSON and serialization),關於與後端溝通做資料交換的部分,接下來要把重要的Firebase補齊,基本上就擁有建置一個具有互動性的App能力了。

什麼是Firebase

Firebase是一個能同時支援iOS、Android和網頁的app雲端開發平台,是app開發者最愛的後端服務平臺(Backend as a Services,Baas)之一。
主要提供即時資料庫,雲端儲存,機器學習,驗證等功能,可以有效縮短app開發時間,並幫助開發者更專注在前端的優化。

更多介紹可以參考Firebase 是什麼 ? 集 APP 後端開發與分析於一身的強大工具!

環境建置


創建Firebase專案

  • 首先到Firebase主控台,建立新的專案。
    https://ithelp.ithome.com.tw/upload/images/20190921/20120028XX5ZnA3cZZ.png

  • 建立專案名稱,這邊以FlutterDemo示範。
    https://ithelp.ithome.com.tw/upload/images/20190921/20120028xRjyt0UFwS.png

  • 啟動Google Analytics (選填)
    https://ithelp.ithome.com.tw/upload/images/20190921/201200281V7IssfwrO.png

  • 設定數據分析位置,可選台灣
    https://ithelp.ithome.com.tw/upload/images/20190921/201200280pHk9Ghao4.png

  • 新專案就緒
    https://ithelp.ithome.com.tw/upload/images/20190921/20120028LetQQCTaKj.png


配置應用程式以使用Firebase

Firebase可以根據你需要的平台,個別配置不同設定。
https://ithelp.ithome.com.tw/upload/images/20190921/20120028FTpfUa1fet.png

配置iOS app

  1. 點擊新增iOS,會跳出需要註冊應用程式,必須填入iOS軟體包ID。
    https://ithelp.ithome.com.tw/upload/images/20190921/20120028eD8zaaDRM3.png

如何找出iOS軟體包ID?
使用編輯器打開現有的flutter專案的/ios/Runner/Runner.xcodeproj/project.pbxproj -> 搜尋PRODUCT_BUNDLE_IDENTIFIER
https://ithelp.ithome.com.tw/upload/images/20190921/20120028LWfFRBhyqk.png

  1. 找到後填入iOS軟體包ID,其他則是選填,填完下一步。
    https://ithelp.ithome.com.tw/upload/images/20190921/20120028Z95eKntXWM.png

  2. 在這裏會要下載設定檔
    https://ithelp.ithome.com.tw/upload/images/20190921/20120028a2PKkxMpls.png

下載下來的設定檔,請放到Flutter專案內的ios/Runner

  1. 繼續後續步驟,直到最後一步進行略過。
    https://ithelp.ithome.com.tw/upload/images/20190921/20120028pWT3s284mQ.png

  2. iOS設置完成
    https://ithelp.ithome.com.tw/upload/images/20190921/20120028Bt1C7GQNwn.png

配置Android app

  1. 點擊新增Android,會跳出需要註冊應用程式,必須填入Android套件名稱。
    https://ithelp.ithome.com.tw/upload/images/20190921/20120028odxoYLQzDa.png

如何找出Android套件名稱?
使用編輯器打開現有的flutter專案的android/app/build.gradle -> 搜尋applicationId
https://ithelp.ithome.com.tw/upload/images/20190921/20120028s2BufXpP4W.png

  1. 找到後填入Android套件名稱,其他則是選填,填完下一步。
    https://ithelp.ithome.com.tw/upload/images/20190921/20120028sQgEBFYbzt.png

  2. 在這裏會要下載設定檔
    https://ithelp.ithome.com.tw/upload/images/20190921/201200285cas1qX84q.png

下載下來的設定檔,請放到Flutter專案內的android/app

  1. 繼續後續步驟,直到最後一步進行略過。
    https://ithelp.ithome.com.tw/upload/images/20190921/20120028BjuhzDsjcx.png

  2. Android設置完成。
    https://ithelp.ithome.com.tw/upload/images/20190921/20120028BRvTrMxudc.png

  3. 接下來要在Android啟用Firebase服務,需要手動添加設定到Gradle文件中。

  • 打開android/build.gradle,找到dependencies
buildscript {

  repositories {
    google()  
  }

  // ...
  dependencies {
    // ...

    // 加入以下這行
    classpath 'com.google.gms:google-services:3.2.1'  // Google Services plugin
  }
}
allprojects {
  // ...

  repositories {
    google()
    // ...
  }
}

注意:Flutter 目前与 Google 服务插件 3.2.1 版兼容。

  • 打開`android/app/build.gradle,另外添加以下設定到文件底部。
dependencies {
  // ...
}

// ...

// 加入以下這行到文件底部
apply plugin: 'com.google.gms.google-services'  // Google Play services Gradle plugin
  • 執行flutter pub get

添加FlutterFire套件

Firebase可透過不同的函式庫被存取,像是即時資料庫(Realtime Database)、身份驗證(Authentication)、分析(Analytics)和儲存(Storage),Flutter提供的一整套函數庫,稱為FlutterFire。
由於Flutter是一個多平台SDK,每個FlutterFire套件同時適用於iOS和Android,因此,如果向Flutter的應用程式添加FlutterFire套件,則雙平台版的Firebase都可以使用該套件。

有需要了解FlutterFire包含哪些套件,可參閱

開始設置FlutterFire

  1. 首先確保當前的應用程式並未在任何模擬器上執行。
  2. 從Flutter專案,打開pubspec.yaml
  3. 加入Firebase Core Flutter SDK套件。
dependencies:
  flutter:
    sdk: flutter
  # 加入Firebase Core Flutter SDK
  firebase_core: ^0.4.0+1

添加分析(可選)

  • 若有啟用分析功能:
dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^0.4.0+1

  # 加入 Google Analytics
  firebase_analytics: ^4.0.2

  # 加入其他相依的Firebase產品,像是Authentication和Cloud Firestore
  firebase_auth: ^0.11.1+3
  firebase_firestore: ^0.12.7+1
  • 若無啟用分析功能:
dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^0.4.0+1

  # 加入其他相依的Firebase產品,像是Authentication和Cloud Firestore
  firebase_auth: ^0.11.1+3
  firebase_firestore: ^0.12.7+1
  1. 執行flutter package get
  2. 如果有添加分析功能,可以在運行App後,到Firebase控制台中,點擊左側的數據分析查看。
    https://ithelp.ithome.com.tw/upload/images/20190921/201200282LHikQ6Z1T.png

勘誤

依照官網範例添加firebase_firestore: ^0.12.7+1後,若執行flutter package get,會產生firebase_firestore ^0.12.7+1 which doesn't match any versions, version solving failed.的錯誤。
原因是firestore已經被棄用,依照這篇Stackoverflow的討論,建議改用cloud_firestore

  1. 執行App,如果可以順利執行,表示一切設定街已經完成。

總結

結束了13天的Flutter基礎介紹,已經有基本UI widgets,layout佈局設置,以及有了跟後端資料作資料交換的先備知識。接下來就會開始進入實戰專案的部分了。


參考資料

https://flutter.dev/docs/development/data-and-backend/firebase
https://tw.alphacamp.co/blog/2016-07-22-firebase


上一篇
30天Flutter手滑系列 - JSON與序列化(JSON and serialization)
下一篇
30天Flutter手滑系列 - 井字遊戲實作(Tic Tac Toe) (1)
系列文
30天手滑用Google Flutter解鎖Hybrid App成就30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言